body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

.nav-bar {
    background-color: #fafafa;
    padding: 1px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #ddd;
}

.nav-bar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-bar li {
    cursor: pointer;
    padding: 5px 10px;
    display: inline-block;
    border-radius: 20px;
    margin: 5px;
    font-size: 23px;
}

.menu .menu-item{
        display: flex;
        flex-direction: column;
        align-items: center; /* 使图标和文本在水平方向上居中对齐 */
        position: relative;
        padding: 10px; /* 或其他适当的内边距 */
        /* 可以在这里添加其他样式，如边框、背景等 */
  }

.menu .menu-item .icon {
    position: absolute;
    top: 0; /* 图标在顶部 */
    left: 50%; /* 初始位置在父容器的水平中心 */
    transform: translateX(-50%); /* 向左移动自身宽度的50%，实现水平居中 */
    /* 图标大小和其他样式 */
    font-size: 4.5vw;
    margin-bottom: 2vw;
}

.menu-item span:not(.icon) {
    /* 针对非.icon的span标签的样式，例如文字颜色、字体大小等 */
    margin-top: 14px; /* 根据需要调整，确保文本在图标下方有足够的空间 */
}

.active {
    color: #000000;
}

.search-bar {
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.search-bar input {
    width: 95%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.profile-section {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.profile-info {
    display: flex;
    flex-direction: column;
}
.profile-info .username{
    margin-left: 2vw;
}
.profile-info .followers{
    margin-left: 2vw;
}

.profile-details {
    display: flex;
    gap: 5px;
}
.profile-details span{
    cursor: pointer;
    padding: 5px 10px;
    display: inline-block;
    background-color: #dedbdb;
    border-radius: 20px;
    margin: 5px;
    font-size: 15px;
}

.menu {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.menu-item {
    text-align: center;
}

.recently-played {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.recent-item {
    text-align: center;
}

.playlists {
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.playlist-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.playlist-item img {
    width: 70px;
    height: 70px;
    margin-right: 10px;
}


.footer {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    padding: 10px 0;
    border-top: 1px solid #ddd;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.footer .footer-item {
    font-size: 16px;
}
.footer .icon{
    font-size: 24px;
    margin-left: 0.5vw;
}
.footer a{
    text-decoration: none; /* 移除下划线 */
    color: inherit; /* 继承父元素的颜色，或者指定为你想要的颜色 */
    /* 你可以添加更多的样式来确保<a>标签看起来和普通文本或元素一样 */
}



